<template>
    <!-- 轮播图 -->
    <div class="floorBanner">
        <div class="swiper-container" ref="cur">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(carouse,index) in list"
                     :key="carouse.id">
                    <img :src="carouse.imgUrl">
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </div>
</template>

<script>
    // 轮播图
    import Swiper from 'swiper'

    export default {
        name: "Carousel",
        props: ['list'],

        watch: {  // 监听，数据获取完成执行
            list: {
                // 立即监听:不管数据有没变化，上来立即监听一次
                // 为什么 watch 监听不到 list ：因为数据从来没变化，是父组件传来，父组件传来时是一个对象，对象里该有的数据都有
                immediate: true,
                handler() {
                    this.$nextTick(() => {
                        // 当执行这个回调的时候：保存服务器数据已有，v-for 执行完毕
                        var mySwiper = new Swiper(
                            this.$refs.cur,
                            {
                                loop: true, // 循环模式选项

                                // 如果需要分页器
                                pagination: {
                                    el: '.swiper-pagination',
                                    // 点击小圆点也切换图片
                                    clickable: true
                                },

                                // 如果需要前进后退按钮
                                navigation: {
                                    nextEl: '.swiper-button-next',
                                    prevEl: '.swiper-button-prev',
                                }
                            })
                    })
                }
            }

        }

    }
</script>

<style scoped>

</style>
